<!--
  ~ Copyright (c) 2017, Hugo Freire <hugo@exec.sh>.
  ~
  ~ This source code is licensed under the license found in the
  ~ LICENSE.md file in the root directory of this source tree.
  -->

<div class="tint"
     [ngClass]="{
                     isMachineLike: recommendation.isLike && !recommendation.isHumanDecision,
                     isHumanLike: recommendation.isLike && recommendation.isHumanDecision,
                     isMahinePass: recommendation.isPass && !recommendation.isHumanDecision,
                     isHumanPass: recommendation.isPass && recommendation.isHumanDecision,
                     isMatch: recommendation.isMatch,
                     notDecided: !recommendation.isLike && !recommendation.isPass}"
     (click)="onClick(recommendation.id); $event.stopPropagation()"
     mdTooltip="Similarity: {{recommendation.photosSimilarityMean}}%"
     tooltipPosition="bottom">

  <img [@fadeInOut]="fadeInState"
       alt="placeholder"
       src=""/>

  <img [@fadeInOut]="fadeOutState"
       class="thumbnail"
       alt="image"
       [src]="recommendation.thumbnailUrl"
       onError="this.src = './assets/images/placeholder.jpg'"
       (load)="isLoaded($event)"/>
</div>
